<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>清除账单</title>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css//gouwuche.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="shortcut icon" href="../img/1.ico" />
</head>

<body>
    <!-- 导航 -->
    <div class="Bigbox">
        <div class="box">
            <ul class="nav">
                <li>
                    <a href="#" id="a1"><span id="a3">马来西亚</span><i class="iconfont icon-xiala"></i></a>
                    <ul>
                        <li>
                            <a href="">全球</a>
                        </li>
                        <li>
                            <a href="">中国大陆</a>
                        </li>
                        <li>
                            <a href="">中国香港</a>
                        </li>
                        <li>
                            <a href="">中国澳门</a>
                        </li>
                        <li>
                            <a href="">中国台湾</a>
                        </li>
                        <li>
                            <a href="">新家坡</a>
                        </li>
                        <li>
                            <a href="">韩国</a>
                        </li>
                        <li>
                            <a href="">马来西亚</a>
                        </li>
                        <li>
                            <a href="">澳大利亚</a>
                        </li>
                        <li>
                            <a href="">新西兰</a>
                        </li>
                        <li>
                            <a href="">加拿大</a>
                        </li>
                        <li>
                            <a href="">日本</a>
                        </li>
                        <li>
                            <a href="">越南</a>
                        </li>
                        <li>
                            <a href="">泰国</a>
                        </li>
                        <li>
                            <a href="">菲律宾</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="denglu.html" target="_blank">亲，请登录</a>
                </li>
                <li>
                    <a href="zhuce.html" target="_blank">免费注册</a>
                </li>
                <li>
                    <a href="#">手机逛淘宝</a>
                </li>
                <li>
                    <a href="#">网页无障碍</a>
                </li>
            </ul>

            <ul class="nav" id="nav">
                <li>
                    <a href="#" id="a1">我的淘宝
                        <i class="iconfont icon-xiala"></i>
                    </a>
                    <ul id="Ul">
                        <li>
                            <a href="">已买到的宝贝</a>
                        </li>
                        <li>
                            <a href="">我的足迹</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><span class="iconfont icon-gouwuche-tianchong"></span>购物车</a>
                </li>
                <li>
                    <a href="#" id="a2"><span class="iconfont icon-shoucang"></span>收藏夹<i
                            class="iconfont icon-xiala"></i></a>
                    <ul id="Ul">
                        <li>
                            <a href="">收藏的宝贝</a>
                        </li>
                        <li>
                            <a href="">收藏的店铺</a>
                        </li>
                    </ul>

                </li>
                <li>
                    <a href="#
                      " id="a4">商品分类</a>
                </li>
                <li>
                    <a href="#" id="a5">免费开店</a>
                </li>
                <i id="i">|</i>
                <li id="a1-1">
                    <a href="" id="a1">千牛买卖家中心<i class="iconfont icon-xiala"></i></a>
                    <ul id="Ul1">
                        <li>
                            <a href="">开店入驻</a>
                        </li>
                        <li>
                            <a href="">已卖出的宝贝</a>
                        </li>
                        <li>
                            <a href="">出售中的宝贝</a>
                        </li>
                        <li>
                            <a href="">卖家服务市场</a>
                        </li>
                        <li>
                            <a href="">卖家培训中心</a>
                        </li>
                        <li>
                            <a href="">体验中心</a>
                        </li>
                        <li>
                            <a href="">电商学习中心</a>
                        </li>
                    </ul>
                </li>
                <li id="a1-2">
                    <a href="" id="a1">联系客服<i class="iconfont icon-xiala"></i></a>
                    <ul id="Ul">
                        <li>
                            <a href="">消费者客服</a>
                        </li>
                        <li>
                            <a href="">卖家客服</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <!-- 搜索框 -->
    <div class="box-o">
        <div class="box box-sou">
            <div>
                <a href="shouye.html"><img src="../img/taobao1.png" alt="" /></a>
            </div>
            <!-- 搜索框 -->
            <div>
                <ul>
                    <li><span class="iconfont icon-sousuo"></span>宝贝<span class="iconfont icon-xiala"></span></li>
                    <li id="t" class="t1">天猫</li>
                    <li id="t">店铺</li>
                </ul>
                <input type="text" id="put">
                <button>搜索</button>
            </div>
        </div>
    </div>

    <!-- 购物车 -->
    <div class="box box-gou">
        <div class="box-g">
            <p>购物车</p>
            <p>
                <span>已选商品（不含运费)</span>
                <span id="price-span">0.00</span>
                <button>结算</button>
            </p>
        </div>
        <div class="box-go">
        <div><input type="checkbox" name="" id="" onchange="allSelectFn(this)"/>&nbsp;&nbsp;全选</div>
        <div>
            <p>商品信息</p>
            <p>单价</p>
            <p>数量</p>
            <p>操作</p>
        </div>
    </div>
        
        <ul id="cart-list">
            <!-- <li>
        <h2></h2>
        <img src="" alt="" />
        <p></p>
        <input type="number" name="" id="" value="" />
        <div class="ton">删除</div>
        
      </li> -->
        </ul>
    </div>
    <!-- 下面 -->
    <div class="footer ">
        <div class="footer-hd box">
            <p>
                <a href="">阿里巴巴集团</a>
                <b>|</b>
                <a href="">阿里巴巴国际站</a>
                <b>|</b>
                <a href="">阿里巴巴中国站</a>
                <b>|</b>
                <a href="">全球速卖通</a>
                <b>|</b>
                <a href="">淘宝网</a>
                <b>|</b>
                <a href="">天猫</a>
                <b>|</b>
                <a href="">聚划算</a>
                <b>|</b>
                <a href="">一淘</a>
                <b>|</b>
                <a href="">阿里妈妈</a>
                <b>|</b>
                <a href="">飞猪</a>
                <b>|</b>
                <a href="">虾米</a>
                <b>|</b>
                <a href="">阿里云计算</a>
                <b>|</b>
                <a href="">云OS</a>
                <b>|</b>
                <a href="">万网</a>
                <b>|</b>
                <a href="">支付宝</a>
                <b>|</b>
                <a href="">来往</a>
            </p>
        </div>
        <div class="footer-bd box">
            <p>
                <span>
                    <a href="">关于淘宝</a>
                </span>
                <span>
                    <a href="">合作伙伴</a>
                </span>
                <span>
                    <a href="">营销中心</a>
                </span>
                <span>
                    <a href="">廉政举报</a>
                </span>
                <span>
                    <a href="">联系客服</a>
                </span>
                <span>
                    <a href="">开放平台</a>
                </span>
                <span>
                    <a href="">诚征英才</a>
                </span>
                <span>
                    <a href="">联系我们</a>
                </span>
                <span>
                    <a href="">网站地图</a>
                </span>
                <span>
                    <a href="">隐私权政策</a>
                </span>
                <span>
                    <a href="">法律声明</a>
                </span>
                <span>
                    <a href="">知识产权</a>
                </span>
                <b>|</b>
                <em>© 2003-现在 Taobao.com 版权所有</em>
            </p>
            <p>
                <span>
                    <a href="">增值电信业务经营许可证：浙B2-20080224</a>
                </span>
                <b>|</b>
                <span>
                    <a href="">增值电信业务经营许可证（跨地区）： B2-20150210</a>
                </span>
                <b>|</b>
                <span>
                    <a href="">浙网文（2019）1033-086号</a>
                </span>
                <b>|</b>
                <span>
                    <a href="">浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</a>
                </span>
            </p>
            <p>
                <span>互联网药品信息服务资格证书（浙）-经营性-2018-0010</span>
                <b>|</b>
                <span>短消息类服务接入代码使用证书：号【2016】00154-A01</span>
                <b>|</b>
                <span>信息网络传播视听许可证：1109364号</span>
                <b>|</b>
                <span>出版物网络交易平台服务经营备案号：新出发浙备字第002号</span>
            </p>
            <p>
                <span>
                    <a href="">
                        <span class="tb-footer-mod" style="
                  background-position: -861px 0px;
                  width: 20px;
                  height: 20px;
                "></span> 浙公网安备 33010002000078号
                    </a>
                </span>
                <b>|</b>
                <span>
                    <a href="">浙B2-20080224-1</a>
                </span>
                <b>|</b>
                <span>广播电视节目制作经营许可证（浙）字第01012号</span>
                <b>|</b>
                <span>市场名称登记证：工商网市字3301004120号</span>
                <b>|</b>
                <span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00004号</span>
            </p>
        </div>
        <div class="footer-ft box">
            <a href=""><img src="../img/xia.png" alt="" /></a>
        </div>
    </div>
    <script>
        let put = document.querySelector('#put')
                put.style.outlineColor = 'transparent';
        // 1-  购物车列表
        async function loadCartList() {
            let url = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
            let id = localStorage.getItem("uid");
            let r = await axios.get(url, { params: { id } });
            console.log(r.data);
            let resArr = r.data.data.map(
                (v) => `
        
        <li> 
            
            <h2>${v.pname}</h2>
            <input onchange="singleIptChange()" type="checkbox" name="" id="" class="singleIpt">
            <img src="${v.pimg}" alt="" />
            <input  class="pnum" min="1" type="number" name=""max="5" id="" value="${v.pnum}" onchange="cartUpateClick(${v.pid},this)" />
            <div class='ton' onclick="cartDelClick(${v.pid},this)">删除</div>
            <p class="price">${v.pprice}</p>
        </li>
        
        `
            );
            document.querySelector("#cart-list").innerHTML = resArr.join("");
        }

        loadCartList();

        //   2-删除
        async function cartDelClick(pid, btn) {
            console.log(pid);
            let uid = localStorage.getItem("uid");
            let url = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
            // 接口地址  参数
            let r = await axios.get(url, { params: { uid, pid } });
            console.log(r.data);

            // 重新渲染列表 或者 刷新页面 或者 直接删除这一行
            // loadCartList();
            // location.reload();
            console.log(btn);
            btn.parentNode.remove();
        }

        //   3-修改 购物车商品的数据
        async function cartUpateClick(pid, ipt) {
            console.log(pid);
            console.log(ipt);
            let pnum = ipt.value;
            let uid = localStorage.getItem("uid");
            let url = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
            let r = await axios.get(url, { params: { uid, pid, pnum } });
            console.log(r.data);
        }

        // 4- 全选
        function allSelectFn(allSelIpt) {
            console.log(allSelIpt.checked);
            // 获取所有 单选 singleIpt
            let singleIptArr = document.querySelectorAll(".singleIpt");
            console.log(singleIptArr);
            // 将所有的单选的checked 改成 全选ipt 一样
            singleIptArr.forEach((v) => (v.checked = allSelIpt.checked));

            // price-span 价格
            let priceSpan = document.querySelector("#price-span");
            if (allSelIpt.checked == false) {
                priceSpan.innerHTML = 0;
            } else {
                // 获取每一行的 商品的商量和单价  相乘，  再每一行的 计算的 价格再相加
                console.log(singleIptArr);

                let countPrice = 0;
                singleIptArr.forEach((ipt) => {
                    ipt; // --
                    let li = ipt.parentNode; // checkbox 所在这一行的父元素

                    // 算出每一行的总价
                    let price = li.querySelector(".price").innerHTML;
                    let pnum = li.querySelector(".pnum").value;
                    console.log(price * pnum);

                    // 每一行的总价都相加
                    countPrice += price * pnum;
                });

                priceSpan.innerHTML = countPrice;
            }
        }

        // singleIptChange单选
        function singleIptChange() {
            let priceSpan = document.querySelector("#price-span");

            // 获取所有 单选 singleIpt
            let singleIptArr = document.querySelectorAll(".singleIpt");
            let countPrice = 0;
            singleIptArr.forEach((ipt) => {
                ipt; // --
                // 判断 当前的这个checkbox 的选中状态 如果是true  才计算
                if (ipt.checked == true) {
                    let li = ipt.parentNode; // checkbox 所在这一行的父元素

                    // 算出每一行的总价
                    let price = li.querySelector(".price").innerHTML;
                    let pnum = li.querySelector(".pnum").value;
                    console.log(price * pnum);

                    // 每一行的总价都相加
                    countPrice += price * pnum;
                }
            });

            priceSpan.innerHTML = countPrice;
        }
    </script>
</body>

</html>